<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 单个使用，只要拿到选中状态就行了 -->
        <!-- 因为我只想它勾了或者没勾 -->
        <input type="checkbox" v-model="chk">请同意协议

        <div>
            <h3>请选择你的感兴趣的栏目</h3>
            <!-- 此时可能数量有多个，所以应该绑定一个数组 -->
            <!-- 我得区分是哪个被勾了，要加value属性，谁被就勾就会把谁的value属性存到数组里 -->
            <!-- 数组里有什么元素，也会自动value属性等于它的被勾上 -->
            <input v-model="chkList" value="leg" type="checkbox">大长腿
            <input v-model="chkList" value="yao" type="checkbox">小蛮腰
            <input v-model="chkList" value="game" type="checkbox">游戏
        </div>

        <!-- 
            v-model用在select的时候要看option有没有value属性
            如果有，就是绑定value
            如果没有，绑定是option里的文字
         -->
        <select v-model="sel">
            <option>接</option>
            <option>化</option>
            <option>发</option>
        </select>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    chk: false,
                    chkList: ['leg', 'game'],
                    sel: '发'
                }
            },
        })
    </script>
</body>
</html>